<template>
  <div id="app">
        <el-select v-model="value" placeholder="想吃什么吃什么" clearable>
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled='item.disabled'
            >
            </el-option>
        </el-select>
        <p>
          <el-select v-model="value" placeholder="请选择">
            <el-option-group
              v-for="group in options2"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </p>
  </div>
</template>

<script>
export default {
    name:'App',
    data(){
      return {
        value:'',
        options: [
          {
            value:"①",
            label: '黑森林蛋糕'
          },{
            value:"②",
            label: '蟹黄包',
            disabled: true
          },{
            value:"③",
            label: '虾仔面'
          },{
            value:"④",
            label: '糖衣炮弹'
          },{
            value:"⑤",
            label: '剁头椒'
          },
        ],
        options2: [
          {
            label: '热门城市',
            options2: [
              {
                value: 'shenzhen',
                label: '深圳'
              }, {
                value: 'beijing',
                label: '北京'
              },
            ]
          },
          {
            label: '城市名',
            options2: [
              {
                value: 'chengdu',
                label: '成都'
              },
              {
                value: 'xian',
                label: '西安'
              },
              {
                value: 'Dalian',
                label: '大连'
              },
            ]
          }
        ]
      }
    }
}
</script>

<style>

</style>